<template>
  <div class="blogList">
    <div>
      <el-header style="position: relative">
        <span style="font-size: 30px;font-family: 'Agency FB';color: #55a1ff  "><i class="fa fa-check-circle-o"></i>&nbsp;&nbsp;博客审核 </span>
        <div style="position: absolute; right: 10px;top: 35px;">  <el-button icon="el-icon-refresh-right" round="true" @click="refresh()">点击刷新</el-button></div>
    <span class="radio" style="float: right">
      <el-radio-group v-model="reverse">
        <el-radio :label="true" >按发表时间倒序</el-radio>
        <el-radio :label="false">按发表时间正序</el-radio>
      </el-radio-group>

    </span>

      </el-header>
    </div>
    <el-divider>未审核博客列表</el-divider>
    <el-main style="overflow-y: scroll;max-height: 650px"  v-infinite-scroll="requestData">
      <div class="block">
        <el-timeline :reverse="reverse">
          <el-timeline-item  v-for="(item,index) in blog" :timestamp="item.deployTime" placement="top">
            <el-card>
              <!--confirm确认事件-->
              <el-popconfirm @confirm="blogCheck(index)"
                             title="确定让这个博客通过审核吗?" style="float: right">
                <el-button size="large"
                           type="primary" slot="reference">通过审核</el-button>
              </el-popconfirm>
              <h4>发布用户: {{item.authorNickname}}</h4>
              <h4>发布地点: {{item.address}}</h4>
              内容:
              <p>{{item.content}}</p>
              <el-row >
                <el-col :span="4" v-for="img in item.images">
                  <el-image
                      style="width: 90%; height: 110px;border: #03e9f4;border-radius: 10px"
                      :src="img.url"
                      :preview-src-list="imgList"
                      fit="cover"
                      @click="preview(img.url)"
                  ></el-image>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8"  v-for="vid in item.videos">
                  <video :src="vid.url"  style="width:90%;height: 250px" controls='controls'></video>
                </el-col>
              </el-row>

            </el-card>
          </el-timeline-item>

        </el-timeline>
      </div>
    </el-main>
  </div>
</template>

<script>
import {getCheckBlogId} from "@/api/admin_api";
import {getBlog} from "@/api/admin_api";
import {updateCheckBlog} from "@/api/admin_api";

export default {
  name: "blog_check",
  data(){
    return{
      reverse:true,
      value1: '',
      defaultDate:'2022-07-01',
      blog:[],
      imgList:[],
      blogId:[],
      param:'热门-全部',
      blogIndex:0,
    }
  },
  methods:{
    // 刷新
    refresh(){
      let _this = this;
      getCheckBlogId(_this.param).then((res)=>{
        _this.blogId = res.data.data;
        _this.blogId.forEach(function(item) {
          getBlog(item).then((res)=>{
            _this.blog.push(res.data.data);
          })
        })
      })
    },
    // 大图预览
    preview(img){
      this.imgList=[];
      this.imgList.push(img);
    },

    //请求三条数据
    requestData(){
      let _this = this;
      if (_this.blogIndex<_this.blogId.length){
        for (let i = 0;i<2;i++){
          getBlog(_this.blogId[_this.blogIndex++]).then((res)=>{
            _this.blog.push(res.data.data)
          })
        }
      }
    },


    // 修改博客为已审核
    blogCheck(index){
      let _this = this;
      updateCheckBlog(_this.blog[index].blogId).then(()=>{
        this.blog.splice(index,1);
      })
    }
  },
  // 初始得到博客
  created() {
    let _this = this;
    getCheckBlogId(_this.param).then((res)=>{
      _this.blogId = res.data.data;
      _this.requestData();
    })


  }


}
</script>

<style>

/*搜索按钮*/
.selectDate .search_button{
  background: transparent;
  color: #DCDFE6;
  border: none;
  position: absolute;
  font-size: 20px;
  right: 20px;
  top: 8px;
}


</style>